<template>
  <div class="login">
    <van-form @submit="onSubmit">
      <img class="logo" src="@/assets/images/logo.png" />
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          left-icon="manager-o"
          placeholder="账号"
          :rules="[{ required: true, message: '请输入您的账号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          left-icon="closed-eye"
          placeholder="密码"
          :rules="[{ required: true, message: '请输入您的密码' }]"
        />
        <van-field
          v-model="smscode"
          name="密码"
          left-icon="shield-o"
          placeholder="验证码"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <template #button>
            <img :src="codeUrl" @click="getCode" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getCodeImg } from '@/api/login'

const username = ref('')
const password = ref('')
const smscode = ref('')
let codeUrl = ref('')
let uuid = ref('')
const onSubmit = values => {
  console.log('submit', values)
}

const getCode = () => {
  getCodeImg().then(({ img, code, uuid }) => {
    if (code === 200) {
      codeUrl = 'data:image/gif;base64,' + img
      console.log(11122, codeUrl)
      uuid = uuid
    }
  })
}
getCode()
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url(../../assets/images/login-background.jpg) no-repeat left top;
  background-size: auto 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1989fa;
  .van-form {
    width: 350px;
    height: 420px;
    overflow-y: auto;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 2px #ddd;
    .logo {
      margin: 30px 0 20px;
    }
  }
}
</style>
